<template>
    <van-form
        @submit="onSubmit"  
        @failed="onFailed"
        >
        <van-field
            v-model="form.phone"
            name="phone"
            label="手机号"
            left-icon="phone-o"
            clearable
            
            placeholder="手机号"
            :rules="[
                {required:true,message:'请输入手机号'},
                {pattern:reg.phone,message:'请输入正确的手机号'}
            ]"
        >
        </van-field>

        <van-field
            v-model="form.captcha"
            left-icon="qr"
            name="captcha"
            clearable
            label="验证码"
            placeholder="验证码"
            :rules="[
                {required:true,message:'请输入验证码'},
                {pattern:reg.code,message:'请输入四位数字验证码'}
            ]"
            >
            <template #button>
                <van-button v-if="toggle" @click="startSend" :disabled="disabled" size="small" type="primary">发送验证码</van-button>
                <van-button v-else disabled  size="small" type="default">等待 {{count}} S</van-button>
            </template>
        </van-field>
        <div style="margin: 16px 0;" class="links">
            <router-link :to="{name:'register'}" class="aitem color1 " >没有账号,请注册</router-link>
            <router-link :to="{name:'forgetpass'}" class="aitem color2 " >找回密码</router-link>
        </div>
        <div style="margin: 16px 0;">
            <van-button  block type="primary" native-type="submit">验证登录</van-button>
            <van-button class="mt20" block type="danger" native-type="reset">重置</van-button>
        </div>
    </van-form>
</template>


<script>
export default {
    data(){
        return {
            form :{ },
            count:180,
            toggle:true 
        }
    },
    watch:{

    },
    methods:{
        async onSubmit(value){
            
            // 先判断是否已经被注册 
            let res = await this.$ajax.findUser({
                phone:value.phone
            })
            if(res.length>0){
                // 校验验证码
                let result = await this.$ajax.verifyCaptcha(value)
                console.log(result)
                if(result.code==200){
                    // 登录成功 
                    this.ShowSuccess('校验成功');
                    localStorage.setItem('phone',value.phone);   // 存储手机号 
                    this.$router.push({name:"mine"})
                    this.changeUserInfo(res[0])  // 存储全局的用户信息 
                }
            }else{
                this.showFailMsg('手机号未注册,请先注册')
            }
        },
        onFailed(){
            this.showFailMsg('请输入有效的登录信息')
        },
        startSend(){

            // 防抖 
            this.timeDown()
            // 发送验证码 
            this.$ajax.sendCaptcha({
                phone:this.form.phone 
            }).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.ShowSuccess("发送成功")
                }
            })
            
        },
        timeDown(){
            this.toggle = false;
            this.count--;
            var timer = setInterval(()=>{
                if(this.count>0){
                    this.toggle = false;
                    this.count--;
                }else{
                    clearInterval(timer)
                    timer = null;
                    this.toggle = true;
                    this.count = 180;
                }
            },1000)
        },
    },
    computed:{
        disabled(){
            return !this.reg.phone.test(this.form.phone)
        }
    },
    mounted(){
        if(this.$route.query.phone){
            this.form = {...this.form,phone:this.$route.query.phone}
        }else{
            this.form = {...this.form,phone:localStorage.getItem('phone')}
        }
    }
}
</script>

<style lang="scss" scoped>
.mt20{
    margin-top:10px;
}
</style>